<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
		<style>
			.fadeing-enter-active,.fadeing-leave-active{transition: opacity .8s;}
			.fadeing-enter,.fadeing-leave-to{opacity: 0;}
			
			.fadeframes-enter-active{animation: bounce-in .5s;}
			.fadeframes-leave-active{animation: bounce-in .5s reverse;}
			@keyframes bounce-in{
				0{transform: scale(0);}
				50%{transform: scale(1.5);}
				100%{transform: scale(1);}
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<button @click="show = !show">toggle</button>
			<transition name="fadeing">
				<p v-if="show">试试transition过渡</p>
			</transition>
			
		</div>
		
		<div id="app2">
			
			<button @click="frames = !frames">toggle</button>
			<transition name="fadeframes">
				<p v-if="frames">试试animation动画</p>
			</transition>
			
		</div>
		
		<div id="app3">
			
			<button @click="frames3 = !frames3">toggle</button>
			<transition name="fadeframes3" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
				<p v-if="frames3">试试自定义过渡类名</p>
			</transition>
			
		</div>
		
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				show:true
			}
		})
		
		var vm2 = new Vue({
			el:'#app2',
			data:{
				frames:true
			}
		})
		
		var vm3 = new Vue({
			el:'#app3',
			data:{
				frames3:true
			}
		})
		
		
		/*
		 * 改变原数组
		 push()
		 pop()
		 shift()
		 unshift()
		 splice()
		 sort()
		 reverse()
		 
		 不改变原数组
		 slice()
		 concat()
		 filter()
		 
		 Vue.set(vm.userProfile,'age',27)
		 vm.$set(vm.userProfile,'age',27)
		 
		 事件修饰符
		 .stop
		 .prevent
		 .self
		 .once
		 .passive
		 .capture
		 .passive
		 
		 按键码
		 .enter
		 .tab
		 .delete
		 .esc
		 .space
		 .up
		 .down
		 .left
		 .right
		 
		 系统修饰符
		 .ctrl
		 .alt
		 .shift
		 .meta
		 .exact
		 
		 鼠标按钮修饰符
		 .left
		 .right
		 .middle
		 
		 
		 
		 
		 
		 * */
		
	</script>
</html>
